<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>话题中心</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/my.css}"/>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/css.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/topic.css}"/>


    <script src="webjars/jquery/3.1.1/jquery.min.js" th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
    <script th:src="@{/js/sweetalert.min.js}"></script>
    <script  th:src="@{/webjars/bootstrap/3.3.5/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/tagsinput.js}" type="text/javascript"></script>
    <script th:src="@{/editormd.js}"></script>
    <script>
        $(function () {
            $(".sort_list li").click(function () {
                $(".sort_list li").removeClass("active");
               $(this).addClass("active");
            });
        })
    </script>
</head>
<body>
<!--引入导航条-->
<div th:insert="~{navbar :: navbar}"></div>
<!--内容部分-->
<div class="container main">
    <div class="row">
        <!--左边部分-->
        <div class="col-lg-9 col-md-12 col-sm-12 leftwrapper container-fluid">
            <div class="left_head">
                <h3 class="topname"><span class="glyphicon glyphicon-stats"></span>
                    热门话题
                    <ul class="sort_list">
                        <li>30天</li>
                        <li>7天</li>
                        <li class="active">全部</li>
                    </ul>
                </h3>

            </div>
            <div class="main_content">
                <!-- 我关注的话题 -->
                <div class="aw-mod aw-topic-list">
                    <div th:each="topic:${topics}" class="mod-body clearfix">
                        <div class="aw-item">
                            <!-- 话题图片 -->
                            <a class="img aw-border-radius-5 " th:href="@{/topic/}+${topic.id}"
                               data-id="1">
                                <img style="width: 50px" height="50px" th:src="${topic.image}"/>
                            </a>
                            <!-- end 话题图片 -->
                            <p class="clearfix">
                                <!-- 话题内容 -->
                                <span class="topic-tag">
                                        <a th:href="@{/topic/}+${topic.id}" data-id="1" th:text="${topic.title}"></a>
                                    </span>
                                <!-- end 话题内容 -->
                            </p>
                            <p class="text-color-999">
                                <span th:text="${topic.talkCount}">1</span> 个讨论
                                <span th:text="${topic.followCount}">2</span>个关注
                            </p>
                            <p class="text-color-999">
                                7 天新增 1 个讨论, 30 天新增 8 个讨论 </p>
                        </div>
                    </div>
                </div>

                <!-- end 我关注的话题 -->
            </div>
            </div>
        <!--右边部分-->
        <div class="col-lg-3 col-md-12 col-sm-12 rightwrapper">
            <!-- 今日话题 -->
            <div class="aw-mod topic-daily hidden-xs">
                <div class="mod-head">
                    <h4>今日话题</h4>
                </div>
                <div class="mod-body">
                </div>
            </div>
            <hr>
            <!-- end 今日话题 -->
            <!-- 新增话题 -->
            <div class="aw-mod new-topic">
                <div class="mod-head">
                    <h4>新增话题</h4>
                </div>
                <hr>
                <div class="mod-body clearfix" style="overflow: hidden;width: 100%;">
                    <div class="aw-topic-bar">
                        <div th:each="topic:${topics}" class="topic-bar clearfix">
                                    <span class="topic-tag">
                                        <a class="text" th:href="@{/topic/}+${topic.id}" th:text="'# '+${topic.title}">Java</a>
                                    </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end 新增话题 -->

        </div>
    </div>
</div>
<div th:insert="~{footer :: footer}"></div>
</body>
</html>
<script>
    //弹出登入框
    $('.login_btn').click(function () {
        $(".login_modal").modal("show");
        return false;
    })
</script>